<template>
  <div>
    <el-form ref="Form" :model="Form" label-width="80px">
      <el-form-item label="用户名称:">
        <el-input v-model="Form.name" disabled placeholder="请输入用户名称"></el-input>
      </el-form-item>
      <el-form-item label="账号名称:">
        <el-input
          disabled
          v-model="Form.userName"
          placeholder="请输入账号名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属机构:">
        <el-input
          disabled
          v-model="Form.regionName"
          placeholder="请输入所属机构"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号:">
        <el-input
          disabled
          v-model="Form.phone"
          placeholder="请输入手机号"
        ></el-input>
        <el-button type="text" @click="ggshjBtn">更改手机号</el-button>
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input
          v-model="Form.email"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
<!--      <el-form-item label="消息推送:">-->
<!--        <el-checkbox-group v-model="Form.pushType">-->
<!--          <el-checkbox :label="0">站内信</el-checkbox>-->
<!--          <el-checkbox :label="1">短信</el-checkbox>-->
<!--          <el-checkbox :label="2">邮件</el-checkbox>-->
<!--        </el-checkbox-group>-->
<!--      </el-form-item>-->
    </el-form>
    <div class="ant-btn">
      <button type="button" @click="submitForm">保存</button>
    </div>
    <!--    更改手机号弹窗-->
    <el-dialog title="更改手机号" :visible.sync="dialogTableVisible" width="40%">
      <el-form ref="loginsjhForm" :model="loginsjhForm" :rules="rulesggsjh" class="ggform">
        <el-form-item prop="mobile">
          <el-input v-model="loginsjhForm.mobile" placeholder="请输入新手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginsjhForm.code" auto-complete="off" placeholder="请输入短信验证码" style="width: 65%">
          </el-input>
          <div class="login-code">
            <el-button type="primary" :disabled="countdown > 0" plain @click="dxBtn()">
              {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="ggsjh('loginsjhForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getInfo, getUpdateEmail,getUpdatephone,getDxyzm } from "@/utils/httpUtils";
export default {
  data() {
    return {
      countdown: 0, // 倒计时初始值为0，表示未开始倒计时
      dialogTableVisible:false,
      loginsjhForm:{
        mobile:'',
        code:'',
        uuid:'',
      },
      rulesggsjh:{
        mobile:[ { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
      },
      Form: {
        name: "",
        userName: "",
        regionName: "",
        phone: "",
        email: "",
        pushType: [],
      },
    };
  },
  mounted() {
    this.userInfo();
  },
  methods: {
    ggshjBtn(){
      this.dialogTableVisible = true
      this.loginsjhForm.mobile = ""
      this.loginsjhForm.code = ""
    },
    ggsjh(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let obj = {
            phone: this.loginsjhForm.mobile,
            code: this.loginsjhForm.code,
            uuid: this.loginsjhForm.uuid,
          };
          getUpdatephone(obj).then(res=>{
            console.log(res,"修改新手机号")
            this.$message({
              showClose: true,
              message: '修改新手机号成功',
              type: 'success'
            });
            this.dialogTableVisible = false;
            this.userInfo();
            this.$refs.loginsjhForm.clearValidate(); // 清 除所有校验状态
          }).catch(err=>{
            this.$message({
              showClose: true,
              message: err.response.data.message,
              type: 'error'
            });
          })
        }
      })
    },
    startCountdown() {
      this.countdown = 60; // 设置倒计时时间为60秒
      const interval = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(interval); // 倒计时结束，清除定时器
        }
      }, 1000);
    },
    dxBtn(){
      if (!this.loginsjhForm.mobile) {
        this.$message.error('请输入手机号');
        return;
      }
      // 开始60秒倒计时
      this.startCountdown();

      this.loginsjhForm.textMessageType = 1
      getDxyzm(this.loginsjhForm).then(res=>{
        this.loginsjhForm.uuid= res.uuid
      })
    },
    userInfo() {
      getInfo().then((res) => {
        console.log(res, "用户信息");
        this.userName = res.username;
        this.Form.userName = res.username;
        this.Form.name = res.nickName;
        this.Form.regionName = res.deptName;
        this.Form.phone = res.phone;
        this.Form.email = res.email;
        // // 将返回的字符串转换为一个数组
        // this.Form.pushType = res.data.pushType
        //   .split(",")
        //   .map((value) => parseInt(value));
      }).catch((err) => {
        console.log(err,"55555")
        // this.$message.error(err.response.message)
      })
    },
    // 保存
    submitForm() {
      getUpdateEmail({
        email: this.Form.email,
      }).then((res) => {
        console.log(res, "用户修改邮箱");
          this.$message({
            message: "修改邮箱成功",
            type: "success",
          });
      })
      .catch(err=>{
        this.$message({
          showClose: true,
          message: err.response.data.message,
          type: 'error'
        });
      })
    },
  },
};
</script>
<style lang="" scoped>
.personalCenter .t4_w .ant_row .ant_colRight .ant-btn {
  text-align: center;
}

.personalCenter .t4_w .ant_row .ant_colRight .ant-btn button {
  width: 63px;
  height: 32px;
  color: #fff;
  background: #0062b4;
  border-color: transparent;
  border-radius: 4px;
}
.personalCenter .t4_w .ant_row .ant_colRight .ggform{
  width: 80% !important;
}

.personalCenter .t4_w .ant_row .ant_colRight .el-form {
  width: 50%;
  margin: 0 auto;
}
.login-code {
  float: right;
}
</style>
